<template>
    <div>
        <el-card class="">
            <template #header>
                <div class="card-header">
                    <h3>订单轨迹</h3>
                </div>
            </template>
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                    :hollow="activity.hollow"
                    :timestamp="activity.timestamp"
                >
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </el-card>
    </div>
</template>

<script>
  import {formatTimestamp} from "@/utils/ruoyi";
  export default {
    name: 'Track',
    components: {  },
    props: {
      order_detail: {
        type: Object
      },
    },
    data() {
      return {
        activities:[
            {
                content: 'Custom icon',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'primary',
            },
            {
                content: 'Custom color',
                timestamp: '2018-04-03 20:46',
                color: '#0bbd87',
            },
            {
                content: 'Custom size',
                timestamp: '2018-04-03 20:46',
                size: 'large',
            },
            {
                content: 'Custom hollow',
                timestamp: '2018-04-03 20:46',
                type: 'primary',
                hollow: true,
            },
            {
                content: 'Default node',
                timestamp: '2018-04-03 20:46',
            },
        ]
      };
    },
    mounted(){
      this.initData()
    },
    methods: {
      initData(){
        const order_detail = this.order_detail
        console.log('initData', order_detail)
        const list = []
        if (order_detail != undefined) {
            list.push({
                content: '创建充电订单',
                timestamp: formatTimestamp(order_detail.createTime),
                type: 'primary'
            })
            let obj1 = {
                  content: '充电桩开始充电',
                  timestamp: order_detail.startTime,
                  type: 'success'
              }
            let obj2 = {
                  content: '充电桩结束充电',
                  timestamp: order_detail.endTime,
                  type: 'warning'
              }
            let obj3 = {
                content: '充电完成',
                timestamp: order_detail.endTime,
                type: 'danger'
              }
            if (order_detail.orderStatus == 1) {
              list.push(obj1)
            }
            if (order_detail.orderStatus == 2) {
              list.push(obj1)
              list.push(obj2)
            }
            if (order_detail.orderStatus == 3) {
              list.push(obj1)
              list.push(obj2)
              list.push(obj3)
            }
        }
        this.activities = list
      }
    }
  }
</script>

<style lang="scss" scoped>
    .el-timeline {
        padding: 0;
    }
</style>
